<div class="cil__base-block">
    <img class="cil__top-image" src="assets/images/centaur/change.svg" />

    <div class="cil__base-block--form" *ngIf="addMinusService.validateForms.length === 0">
      <app-new-page-header
        [title]="'USER.TITLE.ITEM' | i18n"
        [index]="-1"
        (addClick)="addMinusService.addItem($event)"
        (minusClick)="addMinusService.minusItem($event)"
      ></app-new-page-header>
    </div>

    <ng-container *ngFor="let validateForm of addMinusService.validateForms; let i=index;">
      <form class="cil__base-block--form" [formGroup]="validateForm" nz-form>
        <app-new-page-header
          [title]="computeUserTitle(i)"
          [index]="i"
          (addClick)="addMinusService.addItem($event)"
          (minusClick)="addMinusService.minusItem($event)"
        ></app-new-page-header>

        <div nz-row [nzGutter]="24">
          <ng-container *ngFor="let item of formItems; let i=index;" >
            <div nz-col [nzSpan]="12">
              <nz-form-item>
                <nz-form-label>{{item.label}}</nz-form-label>
                <nz-form-control nzHasFeedback="true">
                  <nz-select
                    *ngIf="item.type === formItemType.SELECT"
                    [formControlName]="item.formControlName"
                  >
                    <nz-option *ngFor="let user of userRoles" [nzLabel]="user.roleName" [nzValue]="user.roleId"></nz-option>
                  </nz-select>

                  <input
                    *ngIf="!item.type"
                    nz-input
                    [type]="item.inputType && item.inputType === 'password' ? 'password' : 'text'"
                    [formControlName]="item.formControlName"
                    [name]="item.formControlName"
                  />
                  <nz-form-explain *ngIf="validateForm.get(item.formControlName).dirty">
                    <ng-container *ngIf="validateForm.get(item.formControlName).getError('required');else second">{{item.errTips['required']}}</ng-container>
                    <ng-template #second>
                      <ng-container *ngIf="validateForm.get(item.formControlName).getError('minlength');else third">{{item.errTips['minLength']}}</ng-container>
                    </ng-template>
                    <ng-template #third>
                      <ng-container *ngIf="validateForm.get(item.formControlName).getError('maxlength');else fourth">{{item.errTips['maxLength']}}</ng-container>
                    </ng-template>
                    <ng-template #fourth>
                      <ng-container *ngIf="validateForm.get(item.formControlName).getError('pattern'); else fifth">{{item.errTips['pattern']}}</ng-container>
                    </ng-template>
                    <ng-template #fifth>
                      <ng-container *ngIf="validateForm.get(item.formControlName).getError('passwordInvalid');else sixth">{{item.errTips['passwordInvalid']}}</ng-container>
                    </ng-template>
                    <ng-template #sixth>
                      <ng-container *ngIf="validateForm.get(item.formControlName).getError('usernameConflicting');else seventh">{{item.errTips['usernameConflicting']}}</ng-container>
                    </ng-template>
                    <ng-template #seventh>
                      <ng-container *ngIf="validateForm.get(item.formControlName).errors && item.errTip">{{item.errTip}}</ng-container>
                    </ng-template>
                  </nz-form-explain>
                </nz-form-control>
              </nz-form-item>
            </div>
          </ng-container>
        </div>
      </form>
    </ng-container>
  </div>
